<template>
  <div>
    <div class="news-top">
      <p>消息</p>
      <div class="box">
        <div id="lef">
          <img src="../../../assets/image/p1.png" alt="">
          <p>物流信息</p>
        </div>
        <div id="cen">
          <img src="../../../assets/image/p2.png" alt="">
          <p>消息通知</p>
        </div>
        <div id="rig">
          <img src="../../../assets/image/p3.png" alt="">
          <p>互动消息</p>
        </div>
      </div>
    </div>
    <div class="bot">
      <div class="chat">
        <img src="../../../assets/image/p1.png" alt="">
        <p class="p1">OIMINI官方旗舰店</p>
        <span class="sp1">09:22</span>
        <p class="p2">请核对你的付款信息</p>
        <span class="sp2">2</span>
      </div>
      <div class="chat">
        <img src="../../../assets/image/p1.png" alt="">
        <p class="p1">OIMINI官方旗舰店</p>
        <span class="sp1">09:22</span>
        <p class="p2">请核对你的付款信息</p>
        <span class="sp2">2</span>
      </div>
      <div class="chat">
        <img src="../../../assets/image/p1.png" alt="">
        <p class="p1">OIMINI官方旗舰店</p>
        <span class="sp1">09:22</span>
        <p class="p2">请核对你的付款信息</p>
        <span class="sp2">2</span>
      </div>
      <div class="chat">
        <img src="../../../assets/image/p1.png" alt="">
        <p class="p1">OIMINI官方旗舰店</p>
        <span class="sp1">09:22</span>
        <p class="p2">请核对你的付款信息</p>
        <span class="sp2">2</span>
      </div>
      <div class="chat">
        <img src="../../../assets/image/p1.png" alt="">
        <p class="p1">OIMINI官方旗舰店</p>
        <span class="sp1">09:22</span>
        <p class="p2">请核对你的付款信息</p>
        <span class="sp2">2</span>
      </div>
    </div>
  </div>
</template>

<script>

</script>

<style lang="stylus" scoped>
.news-top
  width 375px
  height 150px
  background-color #c1ab96
  padding  60px 16px
  margin-bottom 40px
  >p
    color #fff
    font-size 21px
    font-weight bolder
  >.box
    width 344px
    height 85px
    background-color #fff
    border-radius 10px
    box-shadow 5px 5px 10px #999
    margin-top 18px
    // margin-bottom 200px
    display flex
    justify-content space-around
    >div
      width 51px
      // z-index 1
      >p
        font-size 12px
        text-align center
        line-height 30px
        color #999
      >img
        margin-left 3px
        margin-top 10px
// 信息框
.bot
  margin-top 65px
  >.chat
    width 335px
    height 70px
    // background-color red
    margin 0px 20px
    box-sizing border-box
    border-bottom  solid #eee thin
    position relative
    padding 10px 0px
    >.p1
      font-weight bold
      position absolute
      font-size 12px
      top 10px
      left 58px
    >.sp1
      position absolute
      top 10px
      right 0px
      font-size 12px
      color #888
    >.p2
      position absolute
      color #888
      font-size 12px
      left 58px
      top 40px
    >.sp2
      display block
      width 17px
      height 17px
      background-color #f96877
      border-radius 50%
      text-align center
      line-height 17px
      color #fff
      position absolute
      top 40px
      right 0
</style>




